<template>
  <div class="weight">

    <!-- 表格工具栏 -->
    <a-row type="flex" justify="space-between">
      <!-- <a-col :span="2">
        <a-button type="primary" size="small" style="fontSize: 13px">
          <template #icon><PlusOutlined /></template>
          <span style="margin-left: 4px">上传权重</span>
        </a-button>
      </a-col> -->
      <a-col :span="2">
        <a-upload
          name="file"
          :action="upload_url"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <a-button :loading="loading" type="primary" size="small" style="fontSize: 13px"> 
            <upload-outlined v-if="!loading" /> 上传权重 
          </a-button>
        </a-upload> 
      </a-col>
      <a-col :span="4" :offset="17">
        <a-input-search
          style="height: 24px; width: 180px"
          placeholder="请输入权重名称搜索"
        >
        </a-input-search>
      </a-col>
      <a-col :span="1">
        <a-button size="small" style="fontSize: 12px" @click="flushWeight">
          <template #icon><ReloadOutlined /></template>
        </a-button>
      </a-col>
    </a-row>

    <!-- 表格部分 -->
    <a-row>
      <a-col :span="24">
        <a-table :columns="columns" :data-source="data" :rowKey="record => record.name"> 

          <!-- 数据集名称插槽，增加 a 标签 -->
          <template #name="{ text }">
            <a>{{ text }}</a>
          </template>
          
          <!-- 操作 action 插槽 -->
          <template #action="{text, record}">
            <a @click="">下载</a>
            <a-divider type="vertical" />
            <a @click="deleteConform(record.name)">删除</a>

          </template>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import axios from "axios"
import { PlusOutlined, ReloadOutlined, ExclamationCircleOutlined, InboxOutlined, UploadOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import qs from 'qs';

const columns = [
  {
    title: '权重名称', 
    dataIndex: 'name', 
    key: 'name',
    slots: { customRender: 'name' }
  },
  {
    title: '权重大小',
    dataIndex: 'data_size', 
    key: 'data_size',
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
  }, 
  {
    title: '创建时间',
    dataIndex: 'create_time', 
    key: 'create_time',
    width: 200
  },
  {
    title: '更新时间',
    dataIndex: 'update_time', 
    key: 'update_time',
    width: 200
  },
  {
    title: '操作',
    dataIndex: 'action',  
    key: 'action',
    slots: { customRender: 'action' },
  },
]

const data = [
  // {
  //   name: 'coco',
  //   data_size: 11,
  //   desc: 'coco测试数据集', 
  //   create_time: '2020年11月11日15:11:05',
  //   update_time: '2020年11月11日15:45:56'
  // },
]

export default {
  components: {
    PlusOutlined, ReloadOutlined, InboxOutlined, ExclamationCircleOutlined, UploadOutlined
  },
  data() {
    return {
      // 数据展示
      columns, data, 
      upload_url: this.$axios.defaults.baseURL + "/weight/create", 
      loading: false,
    }
  }, 
  methods: {

    // 处理数据刷新
    flushWeight() {
      this.$axios.get('/weight/retrieve')
      .then(response =>{
        // console.log(response.data);
        this.data = response.data;
      }).catch(error => {
        console.log(error)
      })
    },
    // 删除数据集
    deleteWeight(name) {
      this.$axios({url: '/weight/delete', params: {name: name}})
      .then(response =>{
        // console.log(response.data);
        if(response.data.status == 'success')
          message.success("权重 " + name + " 已删除！");
        else
          message.success("删除失败！" + response.data.error);
        this.flushWeight();
      }).catch(error => {
        console.log(error)
      })
    },
    // 删除警示
    deleteConform(name) {
      let that = this
      Modal.confirm({
        title: '确定删除提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定删除权重"' + name + '"吗？删除后将不可恢复！',
        onOk() {
          that.deleteWeight(name); 
        },
        onCancel() {},
      });
    },

    // 权重上传
    beforeUpload(file) {
      const isPt = 'pt' == file.name.substr(file.name.lastIndexOf('.') + 1);
      if (!isPt) {
        message.error('请上传 .pt 格式的yolov5权重模型！');
      }
      return isPt;
    },

    // 上传状态
    handleChange(info) {
      const status = info.file.status; 
      if (status === 'uploading') {
        this.loading = true;        
        // message.loading("Uploading " + info.file.name + " ...")
        return;
      }
      if (status === 'done') {
        this.loading = false;  
        console.log(info.file.response); 
        if (info.file.response.status == 'fail')
          message.error(info.file.response.error); 
        else
          message.success('权重 ' + info.file.filename + ' 上传成功！')
        this.flushWeight(); 
      }
    }, 
  },
  mounted() {
    this.flushWeight()
  }, 
}
</script>

<style scoped>

  .weight {
    padding: 16px;
  }

  /deep/ .ant-row {
    padding-bottom: 10px;
  }

  /deep/ .ant-input {
    font-size: 12px;
  }

  /deep/ .ant-table {
    font-size: 14px;
  }

  /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
    padding: 10px;
    height: 40px;
  }

  /deep/ .ant-table-thead > tr > th {
    border-right: 1px solid #fff;
  }

</style>